<template>
  <div class="information-panel">
    <h2 class="title" :class="!showInformation ? 'hide' : ''" @click="showInformation = !showInformation">
      <span>{{$t('webchat.accessInformation')}}</span>
      <i class="icon el-icon-arrow-down" v-show="!showInformation"></i>
      <i class="icon el-icon-arrow-up" v-show="showInformation"></i>
    </h2>
    <div class="information" v-show="showInformation">
      <div class="item">
        <div class="label">{{$t('webchat.platformName')}}</div>
        <div class="value">{{chatInfo.accessName ? chatInfo.accessName : $t('webchat.nothing')}}</div>
      </div>
      <div class="item">
        <div class="label">{{$t('webchat.accessWay')}}</div>
        <div class="value">{{chatInfo.platform ? showChatMethod() : $t('webchat.nothing')}}</div>
      </div>
      <div class="item">
        <!-- 浏览器名称+版本 -->
        <div class="label">{{$t('webchat.browser')}}</div>
        <div class="value">{{browserInfo}}</div>
      </div>
      <div class="item">
        <!-- 操作系统+机型 -->
        <div class="label">{{$t('webchat.osInfo')}}</div>
        <div class="value">{{osInfoNew}}{{deviceInfo}}</div>
      </div>
      <div class="item">
        <div class="label">{{$t('webchat.are')}}&{{$t('webchat.ipAdress')}}</div>
        <div class="value">{{webchatData.area}}  {{webchatData.ip}}</div>
      </div>
      <div class="item" v-if="flag === 'kf'">
        <div class="label">{{$t('webchat.searchForSource')}}</div>
        <div class="value">{{webchatData.seoSource}}</div>
      </div>
      <div class="item" v-if="flag === 'kf'">
        <div class="label">{{$t('webchat.seoKeywords')}}</div>
        <div class="value">{{seoKeywords}}</div>
      </div>
      <div class="item" v-if="webchatData.utm_source">
        <div class="label">{{$t('webchat.utm_source')}}</div>
        <div class="value">{{utm_source}}</div>
      </div>
      <div class="item" v-if="webchatData.utm_medium">
        <div class="label">{{$t('webchat.utm_medium')}}</div>
        <div class="value">{{utm_medium}}</div>
      </div>
      <div class="item" v-if="webchatData.utm_term">
        <div class="label">{{$t('webchat.utm_term')}}</div>
        <div class="value">{{utm_term}}</div>
      </div>
      <div class="item" v-if="webchatData.utm_content">
        <div class="label">{{$t('webchat.utm_content')}}</div>
        <div class="value">{{utm_content}}</div>
      </div>
      <div class="item" v-if="webchatData.utm_campaign">
        <div class="label">{{$t('webchat.utm_campaign')}}</div>
        <div class="value">{{utm_campaign}}</div>
      </div>
      <div class="item" v-if="flag === 'kf'">
        <div class="label">{{$t('webchat.searchForSourceUpper')}}</div>
        <div class="value ellipsis">
          <a v-if="webchatData.referrer && webchatData.referrer !== 'undefined'" :href="webchatData.referrer" :title="webchatData.referrer" target="_blank">{{webchatData.referrer}}</a>
          <span v-else>{{$t('customer.unknownSource')}}</span>
        </div>
      </div>
      <div class="item" v-if="flag === 'kf'">
        <div class="label">{{$t('webchat.chatSource')}}</div>
        <div class="value ellipsis">
          <a v-if="webchatData.fromUrl && webchatData.fromUrl !== 'undefined'" :href="webchatData.fromUrl" :title="webchatData.fromUrl" target="_blank">{{webchatData.fromUrl}}</a>
          <span v-else>{{$t('customer.unknownSource')}}</span>
        </div>
      </div>
      <div class="item" v-if="webchatData.platform === 'wxmini'">
        <div class="label">{{$t('webchat.WxminiSource')}}</div>
        <div class="value ellipsis">
          <a v-if="webchatData.miniApp && webchatData.miniApp !== 'undefined'" :href="webchatData.miniApp" :title="webchatData.miniApp" target="_blank">{{webchatData.miniApp}}</a>
          <span v-else>{{$t('customer.unknownSource')}}</span>
        </div>
      </div>
      <div class="item" v-if="flag === 'kf'">
        <div class="label">{{$t('webchat.landingPageUrl')}}</div>
        <div class="value ellipsis">
          <a v-if="webchatData.landingPageUrl && webchatData.landingPageUrl !== 'undefined'" :href="webchatData.landingPageUrl" :title="webchatData.landingPageUrl" target="_blank">{{webchatData.landingPageUrl}}</a>
          <span v-else>{{$t('webchat.undefinedlandingPage')}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { deepClone } from '@/utils/m7Utils.js'
import $URL from '@/utils/gbk.js'
var UAParser = require('ua-parser-js');
var parserFun = new UAParser();
export default {
  name: 'AccessInformation',
  data () {
    return {
      flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
      showInformation: true
    }
  },
  props: {
    webchatData: Object,
    chatInfo: Object
  },
  methods: {
    showChatMethod () {
      let platform = ''
      if (this.webchatData) {
        if (this.webchatData.platform === 'pc') {
          platform = this.$t('webchat.platformPc')
        } else if (this.webchatData.platform === 'wap') {
          platform = this.$t('webchat.platformWap')
        } else if (this.webchatData.platform === 'sdk') {
          platform = this.$t('webchat.platformApp')
        } else if (this.webchatData.platform === 'weixin') {
          platform = this.$t('webchat.platformWeixin')
        } else if (this.webchatData.platform === 'wxmini') {
          platform = this.$t('webchat.platformWeixinMini')
        } else if (this.webchatData.platform === 'weibo') {
          platform = this.$t('webchat.platformWeibo')
        } else if (this.webchatData.platform === 'wxwork') {
          platform = this.$t('webchat.enterpriseShot')
        } else if (this.webchatData.platform === 'ocpc') {
          platform = this.$t('webchat.baiduBCP')
        } else if (this.webchatData.platform === 'dy') {
          platform = this.$t('webchat.TikTok')
        } else if (this.webchatData.platform === 'wxkf') {
          platform = this.$t('webchat.platformWXKF')
        } else {
          platform = this.$t('webchat.platformOther')
        }
      }
      return platform
    },
    decodeFun (data) {
      let val = data
      if (val) {
        try {
          val = decodeURIComponent(val)
        } catch (error) {
          try {
            val = $URL().decode(val)
          } catch (error) {
            val = ''
          }
        }
      }
      return val
    }
  },
  computed: {
    seoKeywords () {
      return this.decodeFun(deepClone(this.webchatData.seoKeywords))
    },
    utm_source () {
      return this.decodeFun(deepClone(this.webchatData.utm_source))
    },
    utm_medium () {
      return this.decodeFun(deepClone(this.webchatData.utm_medium))
    },
    utm_term () {
      return this.decodeFun(deepClone(this.webchatData.utm_term))
    },
    utm_content () {
      return this.decodeFun(deepClone(this.webchatData.utm_content))
    },
    utm_campaign () {
      return this.decodeFun(deepClone(this.webchatData.utm_campaign))
    },
    browserInfo () {
      // 浏览器
      var content = ''
      if (this.webchatData && this.webchatData.navigator) {
        var output = {}
        try {
          output = parserFun.setUA(this.webchatData.navigator).getResult()
        } catch (error) {}
        if (output && output.browser && output.browser.name) {
          content = output.browser.name
          if (output.browser.version) {
            content = output.browser.name + ' ' + output.browser.version
          }
        }
      }
      if (!content || content === 'undefined') {
        if (this.webchatData.ubaInfo && this.webchatData.ubaInfo.browserName) {
          content = this.webchatData.ubaInfo.browserName
        } else {
          content = this.$t('webchat.nothing')
        }
      }
      return content
    },
    osInfoNew () {
      // 操作系统
      var osContent = ''
      if (this.webchatData && this.webchatData.navigator) {
        var output = {}
        try {
          output = parserFun.setUA(this.webchatData.navigator).getResult()
        } catch (error) {}

        if (output && output.os && output.os.name) {
          osContent = output.os.name
          if (output.os.version) {
            osContent = output.os.name + ' ' + output.os.version
          }
        }
      }
      if (!osContent || osContent === 'undefined') {
        if (this.webchatData.ubaInfo && this.webchatData.ubaInfo.osInfo) {
          osContent = this.webchatData.ubaInfo.osInfo
        } else {
          osContent = this.$t('webchat.nothing')
        }
      }
      return osContent
    },
    deviceInfo () {
      // 移动端机型
      var deviceCon = ''
      if (this.webchatData && this.webchatData.navigator) {
        var output = {}
        try {
          output = parserFun.setUA(this.webchatData.navigator).getResult()
        } catch (error) {}
        if (output && output.device && output.device.type === 'mobile') {
          deviceCon = ' ' + output.device.model
        }
      }
      return deviceCon
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "./../../../../../assets/common.styl"
.information-panel
  padding-top 20px
  padding-left 20px
  padding-right 20px
  .title
    font-size 14px
    font-weight 600
    color $cf-gray3
    cursor pointer
    .icon
      margin-left 5px
      font-size 11px
      color $cf-level4
  .hide
    padding-bottom 20px
    border-bottom solid 1px #d9d9d9

.information
  padding-top 8px
  padding-bottom: 20px;
  border-bottom: solid 1px #d9d9d9;
  .item
    position relative
    min-height 24px
    line-height 24px
    &.clearfix:after
      display block
    .label
      width 90px
      float left
      color $cf-gray3
    .value
      color $cf-gray0
      word-wrap break-word
      word-break normal
      a
        color $c-main
</style>
